<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">上传保单</span>
      </div>
      <el-row >
        <el-col>
          <el-form-item>
            <el-button type="primary" size="small" :disabled="tableData.length === 0" @click="handleBatch">批量处理时间</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-table ref="multipleTable" :data="detailForm.tableData" border tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30" />
            <el-table-column align="center" label="操作" width="50">
              <template #default="{row,$index}">
                <el-button size="mini" type="text"  @click="handleEdit(row,$index)">编辑
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="品牌/车型" prop="carNo" min-width="280">
              <template #default="{row}">
                {{ row.brandName }}{{ row.modelName ? '/' + row.modelName : '' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="车牌号" prop="carNo" min-width="180"/>

            <el-table-column align="center" label="车架号" prop="vinNo" min-width="180"/>

            <el-table-column align="center" label="商业险实际开始时间" prop="syxActualBeginTime" min-width="180">
              <template #default="{row,$index}">
                <el-form-item class="formTable"
                              :prop="'tableData.'+$index+'.syxActualBeginTime'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-date-picker v-model="row.syxActualBeginTime" type="date" placeholder="请选择商业险实际开始时间"
                                  v-if="isEdit "
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ row.syxActualBeginTime }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险实际结束时间" min-width="180" prop="syxActualEndTime">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxActualEndTime'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-date-picker v-model="row.syxActualEndTime" type="date" placeholder="请选择商业险实际结束时间"
                                  v-if="isEdit "
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ row.syxActualEndTime }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险保单号" prop="syxPolicyCode" min-width="160">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxPolicyCode'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.syxPolicyCode"
                            placeholder="请输入商业险保单号" size="mini"/>
                  <span v-else>{{ row.syxPolicyCode }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险实际开始时间" prop="jqxActualBeginTime" min-width="180">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxActualBeginTime'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-date-picker v-model="row.jqxActualBeginTime" type="date" placeholder="请选择交强险起保日"
                                  v-if="isEdit"
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ row.jqxActualBeginTime }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险实际结束时间" prop="jqxActualEndTime" min-width="180">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxActualEndTime'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-date-picker v-model="row.jqxActualEndTime" type="date" placeholder="请选择交强险到期日"
                                  v-if="isEdit"
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ row.jqxActualEndTime }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险保单号" prop="jqxPolicyCode" min-width="160">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxPolicyCode'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.jqxPolicyCode"
                            placeholder="请输入交强险保单号" size="mini"/>
                  <span v-else>{{ row.jqxPolicyCode }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险保单" width="120"/>
            <el-table-column align="center" label="交强险保单" width="120"/>
          </el-table>
        </el-col>
      </el-row>

    </el-card>

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" class="dialogForm"  label-width="160px">
        <el-row v-if="title === '编辑'">
          <el-col :span="12">
            <el-form-item label="车架号:" prop="vinNo">
              <span>{{ form.vinNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号:" prop="carNo">
              <span>{{ form.carNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="title === '编辑'">
          <el-col :span="12">
            <el-form-item label="商业险保单号:" prop="syxPolicyCode">
              <el-input v-if="isEdit" v-model="form.syxPolicyCode" placeholder="请输入商业险保单号" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交强险保单号:" prop="jqxPolicyCode">
              <el-input v-if="isEdit" v-model="form.jqxPolicyCode" placeholder="请输入交强险保单号" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商业实际开始使时间:" prop="syxActualBeginTime">
              <el-date-picker v-model="form.syxActualBeginTime" type="date" placeholder="请选择商业实际开始使时间"
                              value-format='yyyy-MM-dd' style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商业实际结束使时间:" prop="syxActualEndTime">
              <el-date-picker v-model="form.syxActualEndTime" type="date" placeholder="请选择商业实际结束使时间"
                              value-format='yyyy-MM-dd' style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交强实际开始使时间:" prop="jqxActualBeginTime">
              <el-date-picker v-model="form.jqxActualBeginTime" type="date" placeholder="请选择交强实际开始使时间"
                              value-format='yyyy-MM-dd' style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交强实际结束使时间:" prop="jqxActualEndTime">
              <el-date-picker v-model="form.jqxActualEndTime" type="date" placeholder="请选择交强实际结束使时间"
                              value-format='yyyy-MM-dd' style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="title === '编辑'">
          <el-col :span="12">
            <el-form-item label="商业险保单:">
              <fileUpload v-model="form.syxPolicyUrl"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交强险保单:">
              <fileUpload v-model="form.jqxPolicyUrl"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
import {effectDate} from "@/utils/libs/effectDate.js"
export default {
  name: 'uploadRemewal',
  props: {
    value: {
      type: Object,
      default: {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    activityId: {
      type: String,
      default: '',
    },
    pageConfig: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {
  },
  data() {
    var jqxStart = (rule, value, callback) => {
      let that = this
      effectDate(rule, value, callback,
          that.form.jqxActualBeginTime,
          that.form.jqxActualEndTime,
          '交强险起保日',
          '交强险到期日'
      )
    };
    var jqxEnd = (rule, value, callback) => {
      let that = this
      effectDate(rule, value, callback,
          that.form.jqxActualBeginTime,
          that.form.jqxActualEndTime,
          '交强险起保日',
          '交强险到期日'
      )
    };
    var syxStart = (rule, value, callback) => {
      let that = this
      effectDate(rule, value, callback,
          that.form.syxActualBeginTime,
          that.form.syxActualEndTime,
          '商业险起保日',
          '商业险到期日'
      )
    };
    var syxEnd = (rule, value, callback) => {
      let that = this
      effectDate(rule, value, callback,
          that.form.syxActualBeginTime,
          that.form.syxActualEndTime,
          '商业险起保日',
          '商业险到期日'
      )
    };
    return {
      title: "",
      open: false,
      form: {},
      rules: {
        syxPolicyCode: [
          {required: true, message: "请输入商业险保单号", trigger: "blur"},
        ],
        jqxPolicyCode: [
          {required: true, message: "请输入交强险保单号", trigger: "blur"},
        ],
        syxActualBeginTime: [
          {required: true,validator: syxStart, trigger: "blur"},
        ],
        syxActualEndTime: [
          {required: true, validator: syxEnd, trigger: "blur"},
        ],
        jqxActualBeginTime: [
          {required: true, validator: jqxStart, trigger: "blur"},
        ],
        jqxActualEndTime: [
          {required: true, validator: jqxEnd, trigger: "blur"},
        ],
      },
      index: 0,
      tableData: [],
      activityName: '',
      shopInsuranceBool: false,//店保
      ourCompanyBool1: false,//我司
      ourCompanyBool2: false,//我司
      formId:''
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleBatch() {
      if (this.tableData.length > 0) {
        this.title = "批量编辑保单时间";
        this.form = {
          syxActualBeginTime: '',
          syxActualEndTime: '',
          jqxActualBeginTime: '',
          jqxActualEndTime: '',
        }
        this.open = true;
      }
    },

    handleSelectionChange(val) {
      this.tableData = val.map(a => {
        return a.workId
      });
    },
    handleEdit(row, index) {
      this.title = "编辑";
      this.open = true;
      this.form = row;
      this.index = index;
    },
    cancel() {
      this.open = false;
      this.form = {};
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            this.detailForm.tableData[this.index] = this.form;
          }
          if (this.title === '批量编辑保单时间') {
            for (let i = 0; i < this.tableData.length; i++) {
              let indexL = this.detailForm.tableData.findIndex(a => a.workId === this.tableData[i])
              if (indexL !== -1) {
                this.detailForm.tableData[indexL].syxActualBeginTime = this.form.syxActualBeginTime
                this.detailForm.tableData[indexL].syxActualEndTime = this.form.syxActualEndTime
                this.detailForm.tableData[indexL].jqxActualBeginTime = this.form.jqxActualBeginTime
                this.detailForm.tableData[indexL].jqxActualEndTime = this.form.jqxActualEndTime
              }
            }

          }
          this.open = false;
        }
      });
    },
    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {

  ::v-deep.formTable {
    margin-bottom: 0;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;
  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;
  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}
</style>


